<template>
  <el-dialog
    class="public-dialog"
    title="公式"
    width="650"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div v-loading="loading">
      <template v-if="props?.data?.math1">
        <div class="leading-[30px]">
          <div>币种: {{ props?.data?.currency }}</div>
          <div>汇率: {{ props?.data?.exchange_rate }}</div>
          <div class="font-bold mb-[8px]">总运费</div>
          <div style="text-indent: 2em">{{ props?.data?.formula2 }}</div>
          <div style="text-indent: 2em">{{ props?.data?.math2 }}</div>
          <div class="font-bold mb-[8px]">基础运费</div>
          <div style="text-indent: 2em">{{ props?.data?.formula1 }}</div>
          <div style="text-indent: 2em">{{ props?.data?.math1 }}</div>

          <!-- <div>人民币金额: {{ props?.data?.freight?.toString() }}</div> -->
        </div>
      </template>
      <template v-else>
        <div class="mt-[10px] mb-[10px]">暂无数据</div>
      </template>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  data: { type: Object, default: () => ({}) },
});

const emit = defineEmits(["update:modelValue", "refresh", "close"]);

const loading = ref(false);

const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style scoped></style>
